IT邦 2022鐵人賽 .NET 6 C# ＆ Line Services 串接Hello 各位好，本篇要將之前略過的 message common property 補充回來～主要就是 quick reply 與 sender 這兩個屬性要介紹，事不宜遲立馬開始。
當有訊息帶著 quick reply 屬性傳送出去時，使用者會在聊天室下方看到對應每個 quick reply button 物件的按鈕，使用者能夠直接點擊按鈕執行各種 action。
quick reply 分了三層，從上到下分別為 quick reply -> Items object -> quick reply button object，每一個訊息最多只能帶 13 個 quick reply button，而每一個 quick reply button 都能使用上一篇介紹過的 actions。
namespace LineBotMessage.Dtos
{
public class BaseMessageDto
{
public string Type { get; set; }
// Quick reply
public QuickReplyItemDto QuickReply { get; set; }
}
public class QuickReplyItemDto
{
public List<QuickReplyButtonDto> Items { get; set; }
}
public class QuickReplyButtonDto
{
public string Type { get; set; } = "action";
public string? ImageUrl { get; set; }
public ActionDto Action { get; set; }
}
}
前幾篇的測試都是使用 swagger 打廣播 api 的方式測試，但是免費的 Line Bot 每個月推播訊息用量可是只有 500 則的，所以這篇開始我們就使用 Line Bot 的回覆訊息功能來測試功能吧，畢竟回覆訊息可是不用錢的呢！
回覆訊息需要透過 webhook 接收到使用者與 Line Bot 的互動內容才能使用一起送來的 reply token 回覆使用者，而使用這種方式最基本的就是透過使用者傳送 關鍵字 來當作判斷要做什麼回覆的依據。
所以先將接收到 message event 時的處理獨立出一個 function 吧。
private void ReceiveMessageWebhookEvent(WebhookEventDto eventDto)
{
dynamic replyMessage = new ReplyMessageRequestDto<BaseMessageDto>();
switch (eventDto.Message.Type)
{
// 收到文字訊息
case MessageTypeEnum.Text:
// 訊息內容等於 "測試" 時
if (eventDto.Message.Text == "測試")
{
//這裡給各位自由發揮，建立一個 ReplyMessageRequestDto 吧。
//不過下方也提供了一個我回覆的訊息範例，需要的請參考～
replyMessage =
}
break;
}
ReplyMessageHandler(replyMessage);
}
/// <summary>
/// 接收 webhook event 處理
/// </summary>
/// <param name="requestBody"></param>
public void ReceiveWebhook(WebhookRequestBodyDto requestBody)
{
dynamic replyMessage;
foreach (var eventObject in requestBody.Events)
{
switch (eventObject.Type)
{
case WebhookEventTypeEnum.Message:
//-------- 修改處 --------
if (eventObject.Message.Type == MessageTypeEnum.Text)
ReceiveMessageWebhookEvent(eventObject);
//-------- 修改處 --------
break;
.
.
.
// 回覆文字訊息並挾帶 quick reply button
replyMessage = new ReplyMessageRequestDto<TextMessageDto>
{
ReplyToken = eventDto.ReplyToken,
Messages = new List<TextMessageDto>
{
new TextMessageDto
{
Text = "QuickReply 測試訊息",
QuickReply = new QuickReplyItemDto
{
Items = new List<QuickReplyButtonDto>
{
// message action
new QuickReplyButtonDto {
Action = new ActionDto {
Type = ActionTypeEnum.Message,
Label = "message 測試" ,
Text = "測試"
}
},
// uri action
new QuickReplyButtonDto {
Action = new ActionDto {
Type = ActionTypeEnum.Uri,
Label = "uri 測試" ,
Uri = "https://www.appx.com.tw"
}
},
// 使用 uri schema 分享 Line Bot 資訊
new QuickReplyButtonDto {
Action = new ActionDto {
Type = ActionTypeEnum.Uri,
Label = "分享 Line Bot 資訊" ,
Uri = "https://line.me/R/nv/recommendOA/@089yvykp"
}
},
// postback action
new QuickReplyButtonDto {
Action = new ActionDto {
Type = ActionTypeEnum.Postback,
Label = "postback 測試" ,
Data = "quick reply postback action" ,
DisplayText = "使用者傳送 displayTex，但不會有 Webhook event 產生。",
InputOption = PostbackInputOptionEnum.OpenKeyboard,
FillInText = "第一行\n第二行"
}
},
// datetime picker action
new QuickReplyButtonDto {
Action = new ActionDto {
Type = ActionTypeEnum.DatetimePicker,
Label = "日期時間選擇",
Data = "quick reply datetime picker action",
Mode = DatetimePickerModeEnum.Datetime,
Initial = "2022-09-30T19:00",
Max = "2022-12-31T23:59",
Min = "2021-01-01T00:00"
}
},
// camera action
new QuickReplyButtonDto {
Action = new ActionDto {
Type = ActionTypeEnum.Camera,
Label = "開啟相機"
}
},
// camera roll action
new QuickReplyButtonDto {
Action = new ActionDto {
Type = ActionTypeEnum.CameraRoll,
Label = "開啟相簿"
}
},
// location action
new QuickReplyButtonDto {
Action = new ActionDto {
Type = ActionTypeEnum.Location,
Label = "開啟位置"
}
}
}
}
}
}
};
傳送預先設定好的關鍵字 “測試” 給 Line Bot 後就會收到回覆訊息。
我的範例訊息就包含了上一篇實作的所有 Action 類別，各位發揮想像力盡情地改造這些按鈕進行測試吧，免費的訊息可以用到天荒地老！
這個功能是使用 uri aciton 搭配 Line 提供的 url schema 實現的，能夠將 Line Bot 的資訊直接分享給他人
按下後會彈出分享的視窗
送出後會傳送出這個訊息，點選後能開啟 Line Bot 的資訊畫面～
Sender 屬性的設置能夠改變 Line Bot 傳送這個訊息給使用者時顯示的名稱與頭像，這個屬性的用處就是利用 Line bot 建立客服系統時可以根據每個客服人員的資訊讓使用者知道目前是在跟誰溝通或是之類的方向。
在 BaseMessageDto.cs 中添加 class
public class SenderDto
{
public string Name { get; set; }
public string IconUrl { get; set; }
}
在 BaseMessageDto 中添加屬性
// Sender
public SenderDto Sender { get; set; }
(偷偷推薦一個可以免費取得圖片的網站 flaticon，這次測試使用到的頭像就是這裡來的！)
把準備好的 icon 放到 UploadFiles 資料夾後，在同樣的 ReceiveMessageWebhookEvent function 添加新的關鍵字回覆內容
if (eventDto.Message.Text == "Sender")
{
replyMessage = new ReplyMessageRequestDto<TextMessageDto>
{
ReplyToken = eventDto.ReplyToken,
Messages = new List<TextMessageDto>
{
new TextMessageDto
{
Text = "你好，我是客服人員 1號",
Sender = new SenderDto
{
Name = "客服人員 1號",
IconUrl = "{ngrok 位置}/UploadFiles/man.png"
}
},
new TextMessageDto
{
Text = "你好，我是客服人員 2號",
Sender = new SenderDto
{
Name = "客服人員 2號",
IconUrl = "{ngrok 位置}/UploadFiles/gamer.png"
}
}
}
};
}
結果如下～
這篇看起來很長很複雜，但其實是把上一篇沒有測試的 Actions 放到這邊一起測試才會讓程式碼變這麼多呢...不過也算是順利結束啦，下一篇就正式回到了訊息介紹的正軌上，要介紹的是 Template message 呢！ 敬請期待!
今天這篇文章較長…就先讓大家腦袋好好消化好了 ~ 下一篇我們再繼續 。
如果想要參考今天範例程式碼的部份，下面是 Git Repo 連結，方便大家參考。
Day12_Message Common Property-Quick Reply & Sender
請問 我試Postback action 有Postback event
所以這樣不是webhook?
https://developers.line.biz/en/reference/messaging-api/#postback-action
iThome鐵人賽
看影片追技術